import React, { Component, Fragment, Suspense } from "react";
import { Link } from "react-router-dom";
import "sass/stands/category-box.scss";

export default class CategoryBox extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount () {
  }
  typeDataQuerys = (name) => { // 学习挣钱，调用父组件方法
    if (name !== this.props.typeName) {
      this.props.typeDataQuery(name);
    }
  }
  render () {
    let { Content, LinkUrl, typeName, noLable} = this.props
    return (
      <div className="category-box">
        <dl>
          {
            !noLable && (<dt>行业分类：</dt>)
          }
          <dd>
            <span className={typeName=== '0'? 'active' : ''} onClick={this.typeDataQuerys.bind(this, '0')}>全部</span>
            {!!Content.length&&Content.map((itemTwo, inx) => {
              if (LinkUrl) {
                return (<Link target="_blank" to={`${LinkUrl}/${itemTwo.categoryName}`} key={`id_${inx}`}>{itemTwo.categoryName}</Link>)
              } else {
                return (<span key={`id_${inx}`} className={itemTwo.categoryName === typeName ? 'active' : ''} 
                  onClick={this.typeDataQuerys.bind(this,itemTwo.categoryName)}>{itemTwo.categoryName}</span>)
              }


            })}
          </dd>
        </dl>
      </div>
    );
  }
}
